<template>
<div>
  <div class="screening fixed" v-show="screeningFixde">
    <div>
      <div @click="sortList">综合排序</div>
      <div class="sort-list" v-if="sort">
        <ul>
          <li>综合排序</li>
          <li>销量最高</li>
          <li>起送价最低</li>
          <li>配送最快</li>
          <li>配送价最低</li>
          <li>人均从低到高</li>
        </ul>
      </div>
    </div>
    <div>好评优先</div>
    <div>距离最近</div>
    <div>
      <div @click="scringList">筛选</div>
      <div class="screening-list" v-if="screening">
          <ul>
            <li>筛选</li>
            <li>筛选</li>
            <li>筛选</li>
            <li>筛选</li>
            <li>筛选</li>
            <li>筛选</li>
          </ul>
        </div>
    </div>
  </div>
  <div id="ss" class="screening" ref="scree_bar">
    <div @click="goTop" ref="_bar">综合排序</div>
    <div>好评优先</div>
    <div>距离最近</div>
    <div @click="goToTop" ref="_par">筛选</div>
  </div>
  <div class="mask" v-show="mask" @click="close"></div>
</div>
</template>

<script>
export default {
  name: 'Screening',
  data () {
    return {
      sort: false,
      screening: false,
      screeningFixde: false,
      mask: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.screeTop)
  },
  methods: {
    sortList () {
      this.sort = !this.sort
      this.screening = false
      this.mask = this.sort
      if (this.sort === true) {
        document.documentElement.style.overflowY = 'hidden'
      } else {
        document.documentElement.style.overflowY = 'scroll'
      }
    },
    scringList () {
      this.screening = !this.screening
      this.sort = false
      this.mask = this.screening
      if (this.screening === true) {
        document.documentElement.style.overflowY = 'hidden'
      } else {
        document.documentElement.style.overflowY = 'scroll'
      }
    },
    screeTop () {
      var scre = this.$refs.scree_bar
      if (!scre) return
      if (parseInt(scre.getBoundingClientRect().top) <= 50.2) {
        this.screeningFixde = true
      } else {
        this.screeningFixde = false
      }
    },
    goTop () {
      var sc = this.$refs.scree_bar
      window.scrollTo(0, sc.offsetTop)
      this.sort = true
      this.mask = this.sort
      document.documentElement.style.overflowY = 'hidden'
    },
    goToTop () {
      var sc = this.$refs.scree_bar
      window.scrollTo(0, sc.offsetTop)
      this.screening = true
      this.mask = this.screening
      document.documentElement.style.overflowY = 'hidden'
    },
    close () {
      this.sort = false
      this.mask = false
      this.screening = false
      document.documentElement.style.overflowY = 'scroll'
    }
  }
}
</script>

<style lang="less" scoped>
  .screening{
    width: 100%;
    display: flex;
    background: white;
    padding: .266667rem /* 20/75 */ 0;
    border-bottom: 1px solid #eee;
    position: relative;
    &.fixed {
      position: fixed;
      background: white;
      top: 1.338667rem /* 100.4/75 */;
      z-index: 888;
    }
    >div {
      width: 25%;
      text-align: center;
      font-size: .373333rem /* 28/75 */;
    }
    .sort-list {
      position: absolute;
      top: .986667rem /* 74/75 */;
      background: white;
      z-index: 999;
      width: 10rem /* 750/75 */;
      li {
        text-align:left;
        margin: .4rem /* 30/75 */ 0 .133333rem /* 10/75 */;
        margin-left: .4rem /* 30/75 */;
      }
    }
    .screening-list {
      position: absolute;
      top: .986667rem /* 74/75 */;
      right: 0;
      background: white;
      z-index: 999;
      width: 10rem /* 750/75 */;
      li {
        text-align:left;
        margin: .4rem /* 30/75 */ 0 .133333rem /* 10/75 */;
        margin-left: .4rem /* 30/75 */;
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
  }
</style>
